<template>
  <el-dialog
    v-model="centerDialogVisible"
    width="30%"
    align-center
    color="white"
    style="background-color: #000000a2; padding: 0%"
  >
    <h1 style="color: white">充值会员</h1>
    <img src="../../assets/VIP.png" alt="" style="    width: 40%;margin-left: -61%;">
    <ul style="margin-left: 42%;
    margin-top: -35%;
    list-style: none;">
        <li> <el-radio v-model="radio" text-color="#000000a2" label="1" @change="buyvip()" >一个月</el-radio></li>
        <li><el-radio v-model="radio" label="3" @change="buyvip()">三个月</el-radio></li>
        <li> <el-radio v-model="radio" label="6" @change="buyvip()">半年</el-radio></li>
        <li><el-radio v-model="radio" label="12" @change="buyvip()">一年</el-radio></li>
    </ul>
   
    
   

    <div  style="    margin-top: 8%;">
 <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button
          type=" "
          class="buy"
          @click="returnalipayvip()"
          v-if="total != 0"
          style="margin-left: 43%;"
        >
          你需支付{{ total }}
        </el-button>
 </span>
    </div>
 <alipay-vip ref="alipayvip" v-show="false"></alipay-vip>
     
  </el-dialog>
 
</template>
  <script>
  
    
      
      import AlipayVip from './AlipayVip.vue';
        
          
            
     
                
                export default {
        components: { AlipayVip },
                  name: "ChargeVip",
                  data() {
                    return {
                      centerDialogVisible: false,
                        radio: "1",
                      total:0
                    };
                  },
                  mounted: function () {
                   
                  },
                
                  methods: {
                      buyvip() {
                      this.total=10*this.radio
                      console.log(this.radio);
                      },
                      returnalipayvip() {
                         sessionStorage.setItem("viptotal", this.total)
                          this.$router.replace('/alipayvip');
                          
                      }
                  },
                };
                
            
        
    
</script>
<style scoped>
.buy {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  background-color: #000000a2;
}
.el-radio{
    text-color:#000000a2
}
</style>